.x-switch {
  min-width: 44px;
  height: 22px;
  position: relative;
  border: none;
  border-radius: 20px;
  display: inline-block;
  cursor: pointer;
  outline: none;
  transition: background-color .3s;

  &::before{
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 20px;
    background-color: #fff;
    transform: translateX(0);
    transition: .3s;
  }

  &.x-switch-checked{
    &.x-switch-primary{
      background-color: @primary;
    }
    &.x-switch-info{
      background-color: @info;
    }
    &.x-switch-danger{
      background-color: @danger;
    }
    &.x-switch-success{
      background-color: @success;
    }

    &.x-switch-disabled{
      &.x-switch-primary{
        background-color: fade(@primary, 20%);
      }
      &.x-switch-info{
        background-color: fade(@info, 20%);
      }
      &.x-switch-danger{
        background-color: fade(@danger, 20%);
      }
      &.x-switch-success{
        background-color: fade(@success, 20%);
      }

      &::before{
        background-color: #FFF;
      }
    }

    &::before{
      left: 100%;
      margin-left: -3px;
      transform: translateX(-100%)
    }

    .x-switch-inner{
      text-align: left;
      padding-right: 25px;
      padding-left: 8px;
    }
  }

  &:active::before{
    width: 21px;
  }

  &.x-switch-disabled{
    cursor: not-allowed;
    background-color: #efefef;

    &::before{
      background-color: #ccc;
    }
  }

  .x-switch-inner{
    width: 100%;
    display: block;
    padding-right: 8px;
    padding-left: 25px;
    text-align: right;
    color: #FFF;
    font-size: 12px;
  }
}

